let cvs, ctx;
window.onload = function() {
  initDom();
  initEvent();
  ctx.strokeStyle = "#000000";
  ctx.strokeWeight = 3;
  ctx.shadowOffsetX = 4.0;
  ctx.shadowOffsetY = 4.0;
  ctx.lineWidth = 10.0;
  ctx.fillStyle = "#FF0000";
  var d = Math.min( cvs.width, cvs.height);
  var k = 120;
  ctx.moveTo(k, k + d / 4);
  ctx.quadraticCurveTo(k, k, k + d / 4, k);
  ctx.quadraticCurveTo(k + d / 2, k, k + d / 2, k + d / 4);
  ctx.quadraticCurveTo(k + d / 2, k, k + d * 3/4, k);
  ctx.quadraticCurveTo(k + d, k, k + d, k + d / 4);
  ctx.quadraticCurveTo(k + d, k + d / 2, k + d * 3/4, k + d * 3/4);
  ctx.lineTo(k + d / 2, k + d);
  ctx.lineTo(k + d / 4, k + d * 3/4);
  ctx.quadraticCurveTo(k, k + d / 2, k, k + d / 4);
  ctx.stroke();
  ctx.fill();
}

function initDom() {
  cvs = document.createElement('canvas');
  ctx = cvs.getContext('2d');
  document.body.appendChild(cvs);
}

function initEvent() {
  resize();
  window.onresize = resize;
}

function resize() {
  cvs.width = window.innerWidth;
  cvs.height = window.innerHeight;    
}

function x1 () {
  var Heart = function(ctx, x, y, a) {
    this.ctx = ctx;
    this.x = x;
    this.y = y;
    this.a = a;
    this.vertices = [];
    for(let i=0; i<50; i++) {
      var step = i/50*(Math.PI*2);//设置心上面两点之间的角度，具体分成多少份，好像需要去试。
      var vector = {
        x : this.a*(16 * Math.pow(Math.sin(step), 3)),
        y : this.a*(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
      }
      this.vertices.push(vector);
    }
}
Heart.prototype.draw = function() {
    this.ctx.beginPath();
    this.ctx.translate(this.x,this.y);
    this.ctx.rotate(Math.PI);
    for(let i=0; i<50; i++) {
        var vector = this.vertices[i];
        this.ctx.lineTo(vector.x, vector.y);
    }
    this.ctx.fillStyle = "red";
    this.ctx.fill();
}
cvs.onmousedown = function(e) {
    var x = e.offsetX;
    var y = e.offsetY;
    var a = 6;
    var heart = new Heart(ctx, x, y, a);
    heart.draw();
}
}